<template>
  <div class="help">
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a
        href="https://cli.vuejs.org"
        target="_blank"
        rel="noopener"
      >vue-cli documentation</a>.
    </p>
    <div
      v-for="(item, index) in aLink"
      :key="index"
    >
      <h3>{{item.h3}}</h3>
      <ul>
        <li
          v-for="(li, num) in item.ul"
          :key="num"
        >
          <a
            :href="li.link"
            target="_blank"
            rel="noopener"
          >{{li.text}}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Help',
  setup() {
    const aLink = [
      {
        h3: 'Installed CLI Plugins',
        ul: [
          {
            text: 'babel',
            link:
              'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel',
          },
          {
            text: 'router',
            link:
              'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router',
          },
          {
            text: 'vuex',
            link:
              'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex',
          },
          {
            text: 'eslint',
            link:
              'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint',
          },
          {
            text: 'typescript',
            link: '',
          },
        ],
      },
      {
        h3: 'Essential Links',
        ul: [
          {
            text: 'Core Docs',
            link: 'https://vuejs.org',
          },
          {
            text: 'Forum',
            link: 'https://forum.vuejs.org',
          },
          {
            text: 'Community Chat',
            link: 'https://chat.vuejs.org',
          },
          {
            text: 'Twitter',
            link: 'https://twitter.com/vuejs',
          },
          {
            text: 'News',
            link: 'https://news.vuejs.org',
          },
        ],
      },
      {
        h3: 'Ecosystem',
        ul: [
          {
            text: 'vue-router',
            link: 'https://router.vuejs.org',
          },
          {
            text: 'vuex',
            link: 'https://vuex.vuejs.org',
          },
          {
            text: 'vue-devtools',
            link: 'https://github.com/vuejs/vue-devtools#vue-devtools',
          },
          {
            text: 'vue-loader',
            link: 'https://vue-loader.vuejs.org',
          },
          {
            text: 'awesome-vue',
            link: 'https://github.com/vuejs/awesome-vue',
          },
        ],
      },
      {
        h3: 'RFC',
        ul: [
          {
            text: 'RFC',
            link: 'https://vue-composition-api-rfc.netlify.app/zh',
          },
          {
            text: 'Vue Composition API RFC',
            link: 'https://vue-composition-api-rfc.netlify.app/zh/api.html',
          },
          {
            text: 'Vue Compostion Repository',
            link: 'https://github.com/vuejs/composition-api',
          },
        ],
      },
    ];
    return {
      aLink,
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
  display: flex;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
